<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="180px"
      v-loading="formLoading"
    >
      <el-form-item v-show="false" label="hideId">
        <el-input v-model="formData.id" />
      </el-form-item>
      <el-tabs>
        <el-tab-pane label="分红">
<!--          <el-form-item label="商家分佣比例" prop="brokerageStorePercent">-->
<!--            <el-input-number-->
<!--              v-model="formData.brokerageStorePercent"-->
<!--              :max="100"-->
<!--              :min="0"-->
<!--              class="!w-xs"-->
<!--              placeholder="请输入商家分佣比例"-->
<!--            />-->
<!--            <el-text class="w-full" size="small" type="info">-->
<!--              平台与商家分佣比例，单位：百分比-->
<!--            </el-text>-->
<!--          </el-form-item>-->
          <el-form-item label="合伙人分佣比例" prop="brokeragePartnerPercent">
            <el-input-number
              v-model="formData.brokeragePartnerPercent"
              :max="100"
              :min="0"
              class="!w-xs"
              placeholder="请输入合伙人分佣比例"
            />
            <el-text class="w-full" size="small" type="info">
              平台与合伙人分佣比例，单位：百分比
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="提现">
          <el-form-item label="单次提现最大金额" prop="onceWithdrawMaxPrice">
            <el-input-number
              v-model="formData.onceWithdrawMaxPrice"
              :min="0"
              :precision="2"
              class="!w-xs"
              placeholder="请输入单次提现最大金额"
            />
            <el-text class="w-full" size="small" type="info">
              用户单次提现最大金额限制，单位：元
            </el-text>
          </el-form-item>
          <el-form-item label="单日提现最大金额" prop="dayWithdrawMaxPrice">
            <el-input-number
              v-model="formData.dayWithdrawMaxPrice"
              :min="0"
              :precision="2"
              class="!w-xs"
              placeholder="请输入单日提现最大金额"
            />
            <el-text class="w-full" size="small" type="info">
              用户单日提现最大金额限制，单位：元
            </el-text>
          </el-form-item>
          <el-form-item label="提现手续费百分比" prop="brokerageWithdrawFeePercent">
            <el-input-number
              v-model="formData.brokerageWithdrawFeePercent"
              :max="100"
              :min="0.1"
              :step="0.1"
              :precision="1"
              class="!w-xs"
              placeholder="请输入提现手续费百分比"
            />
            <el-text class="w-full" size="small" type="info">
              用户提现手续费设置，单位：百分比
            </el-text>
          </el-form-item>
<!--          <el-form-item label="提现方式：1-钱包；2-银行卡；3-微信；4-支付宝" prop="brokerageWithdrawTypes">-->
<!--            <el-input v-model="formData.brokerageWithdrawTypes" placeholder="请输入提现方式：1-钱包；2-银行卡；3-微信；4-支付宝" />-->
<!--          </el-form-item>-->
        </el-tab-pane>
        <el-tab-pane label="灵境币">
          <el-form-item label="灵境币平台抽佣比例" prop="pointPercent">
            <el-input-number
              v-model="formData.pointPercent"
              :max="100"
              :min="0"
              class="!w-xs"
              placeholder="请输入灵境币平台抽佣比例"
            />
            <el-text class="w-full" size="small" type="info">
              灵境币平台抽佣设置，单位：百分比
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="系统">
          <el-form-item label="是否开启测试账号登录" prop="nameLoginChannel">
            <el-switch
              v-model="formData.nameLoginChannel"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="关闭"
            />
          </el-form-item>
          <el-form-item label="官方服务指定用户" prop="officialUserId">
            <el-input-number
              v-model="formData.officialUserId"
              :min="0"
              class="!w-xs"
              placeholder="请设置官方服务指定用户"
            />
            <el-text class="w-full" size="small" type="info">
              官方服务指定用户，请寻找七时区小助手的用户ID。
            </el-text>
          </el-form-item>
          <el-form-item label="商品使用须知" prop="goodsUseNotice">
            <el-input
              v-model="formData.goodsUseNotice"
              placeholder="请输入商品使用须知"
              type="textarea"
              rows="4"
            />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <!-- 保存 -->
      <el-form-item>
        <el-button :loading="formLoading" type="primary" @click="submitForm"> 保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { ConfigApi, ConfigVO } from '@/api/store/config'
import ConfigForm from './ConfigForm.vue'
import {cloneDeep} from "lodash-es";

const message = useMessage() // 消息弹窗
const formLoading = ref(false)
const formRef = ref()
const formData = ref({
  id: undefined,
  brokerageStorePercent: undefined,
  brokeragePartnerPercent: undefined,
  onceWithdrawMaxPrice: undefined,
  dayWithdrawMaxPrice: undefined,
  brokerageWithdrawFeePercent: undefined,
  pointPercent: undefined,
  brokerageWithdrawTypes: undefined,
  officialUserId: undefined,
  goodsUseNotice: undefined,
  nameLoginChannel: undefined,
})
const formRules = reactive({
  brokerageStorePercent: [{ required: true, message: '商家分佣比例不能为空', trigger: 'blur' }],
  brokeragePartnerPercent: [{ required: true, message: '合伙人分佣比例不能为空', trigger: 'blur' }],
  onceWithdrawMaxPrice: [{ required: true, message: '单次提现最大金额不能为空', trigger: 'blur' }],
  dayWithdrawMaxPrice: [{ required: true, message: '单日提现最大金额不能为空', trigger: 'blur' }],
  brokerageWithdrawFeePercent: [{ required: true, message: '提现手续费百分比不能为空', trigger: 'blur' }],
  pointPercent: [{ required: true, message: '灵境币平台抽佣比例不能为空', trigger: 'blur' }],
  brokerageWithdrawTypes: [{ required: true, message: '提现方式：1-钱包；2-银行卡；3-微信；4-支付宝不能为空', trigger: 'blur' }],
})

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ConfigApi.getConfig(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const submitForm = async () => {
  if (formLoading.value) return
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = cloneDeep(unref(formData.value)) as unknown as ConfigApi.ConfigVO
    // 金额放大
    data.onceWithdrawMaxPrice = data.onceWithdrawMaxPrice * 100
    data.dayWithdrawMaxPrice = data.dayWithdrawMaxPrice * 100
    await ConfigApi.updateConfig(data)
    message.success('保存成功')
  } finally {
    formLoading.value = false
  }
}
/** 查询交易中心配置 */
const getConfig = async () => {
  formLoading.value = true
  try {
    const data = await ConfigApi.getConfig()
    if (data != null) {
      formData.value = data
      // 金额缩小
      formData.value.onceWithdrawMaxPrice = data.onceWithdrawMaxPrice / 100
      formData.value.dayWithdrawMaxPrice = data.dayWithdrawMaxPrice / 100
    }
  } finally {
    formLoading.value = false
  }
}
/** 初始化 **/
onMounted(() => {
  getConfig()
})
</script>
